<template>
  <!--  接入产品  -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="设备名称/IP地址/MAC/资产编号" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型" prop="productName">
        <el-select
          v-model="queryParams.productName"
          placeholder="设备类型"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in productData"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备使用状态" prop="productName">
        <el-select
          v-model="queryParams.productName"
          placeholder="设备使用状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in productStatusData"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
              <el-button
                type="danger"
                
                icon="el-icon-delete"
                size="mini"
                @click="handleDeleteAll"
              >批量删除
              </el-button>
            </el-col>
            <!--导入导出下载模板-->
             <el-col :span="1.5">
           <el-upload
              ref="upload"
              class="upload-demo"
              action="#"
              accept=".xlsx, .xls"
              :auto-upload="false"
             :on-change="uploadFile"
               :show-file-list="false"
             >
            <el-button type="primary" class="el-button el-button--warning el-button--mini is-" ><i class="el-icon-upload"></i><span>导入</span></el-button>
           </el-upload>
             </el-col>
          <el-col :span="1.5">
             <button type="button" class="el-button el-button--warning el-button--mini is-"  @click="downloadExcelDC"><!----><i class="el-icon-download"></i><span>导出</span></button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="downloadExcel" class="el-button   el-button--mini is-">下载模板</el-button>
          </el-col>
           <!--导入导出下载模板-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="roleList" :header-cell-style="{ background: '#F3F5FC' }" @selection-change="handleSelectionChange" ref="multipleTable">
      <el-table-column
              type="selection"
              header-align="center"
              align="center"
              width="50">
            </el-table-column><strong></strong>
      <el-table-column label="序号" align="center" width="50" fixed="left">
        <template slot-scope="scop">
          {{ scop.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="设备名称" prop="sbmc" :show-overflow-tooltip="true" fixed="left" width="120"/>
      <el-table-column label="资产编号" prop="zcbh" :show-overflow-tooltip="true" width="120"/>
      <el-table-column label="IP地址" prop="ipdz" width="120"/>
      <el-table-column label="MAC" align="center" prop="macdz" width="130"/>
      <el-table-column label="是否国产化" align="center" prop="sfgch" width="90"/>
      <el-table-column label="设备类型" align="center" prop="sblx" />
      <el-table-column label="物理位置" prop="wlwz" :show-overflow-tooltip="true"/>
      <el-table-column label="设备使用状态" prop="sbsyzt" :show-overflow-tooltip="true" width="100"/>
      <el-table-column label="在用状态" prop="zyzt" width="140"/>
      <el-table-column label="重要程度" align="center" prop="zycd" />
      <el-table-column label="产品型号" align="center" prop="cpxh"  />
      <el-table-column label="责任人" align="center" prop="zrr"  />
      <el-table-column label="归属部门" prop="gsbm" :show-overflow-tooltip="true"/>
      <el-table-column label="归属机构类型" prop="gsjglx" :show-overflow-tooltip="true" width="100"/>
      <el-table-column label="安全域/区" prop="aqy" />
      <el-table-column label="密级" align="center" prop="mj"  />
      <el-table-column label="运维单位" align="center" prop="ywdw"  />
      <el-table-column label="生产厂商" align="center" prop="versionName"  />
      <el-table-column label="过保日期" prop="gbrq" :show-overflow-tooltip="true"/>
      <el-table-column label="入网时间" prop="rwrq" :show-overflow-tooltip="true"/>
      <el-table-column label="退网时间" prop="twrq" />
      <el-table-column label="健康度" align="center" prop="versionName"  />
      <el-table-column label="使用寿命" align="center" prop="versionName"  />
      <el-table-column label="特殊设备" align="center" prop="versionName"  />
      <el-table-column label="特殊设备" prop="productName" :show-overflow-tooltip="true"/>
      <el-table-column label="采购日期" prop="companyName"/>
      <el-table-column label="更新时间" align="center" prop="versionName"  />
      <el-table-column label="备注" align="center" prop="versionName"  />
      <el-table-column label="运行状态" align="center" prop="versionName"  />
      <el-table-column label="操作" align="center" width="140" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
                   @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
                @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->

    <el-dialog
      title="修改"
      :visible.sync="open"
      width="1000px"
      append-to-body
      class="dia-style"
    >
      <editDialog ref="editRef" :title="title" :formData="formData"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="新增"
      :visible.sync="openAdd"
      width="1000px"
      append-to-body
      class="dia-style"
    >
      <addDialog ref="addRef" :title="title" :formData="formData"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormAdd">保 存</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addDialog from './addApt.vue'
import editDialog from './editApt.vue'
import { listRole, getRole, delRole, changeRoleStatus } from '@/api/system/role'
import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
import productTable from '../mockData/productTableApt.json'

export default {
  name: 'fortress',
  dicts: ['sys_normal_disable'],
  components: {editDialog,addDialog },
  data() {
    return {
      open:false,
      openAdd:false,
      formData: {

      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: '',
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      // 数据范围选项
      dataScopeOptions: [
        {
          value: '1',
          label: '全部数据权限'
        },
        {
          value: '2',
          label: '自定数据权限'
        },
        {
          value: '3',
          label: '本部门数据权限'
        },
        {
          value: '4',
          label: '本部门及以下数据权限'
        },
        {
          value: '5',
          label: '仅本人数据权限'
        }
      ],
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      productData: [{
        label: 'APT',
        value: '10'
      }],
      productStatusData: [{
        label: '全部',
        value: '10'
      }, {
        label: '库存中',
        value: '7'
      }, {
        label: '待入网',
        value: '4'
      }, {
        label: '已入网',
        value: '3'
      }, {
        label: '维修中',
        value: '6'
      }, {
        label: '退网中',
        value: '6'
      }, {
        label: '已退网',
        value: '6'
      }, {
        label: '报废中',
        value: '6'
      }, {
        label: '已报废',
        value: '6'
      }]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /* 取消0*/
    cancel(){
        this.open=false;
    },
    submitForm(){
        this.open=false;
    },
    /* 取消0*/
    cancelAdd(){
        this.openAdd=false;
    },
    submitFormAdd(){
        this.openAdd=false;
    },
    /** 查询角色列表 */
    getList() {
      this.loading = false
      this.roleList = productTable.data.list
      this.total = productTable.data.totalCount
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      menuTreeselect().then(response => {
        this.menuOptions = response.data
      })
    },
    /** 查询部门树结构 */
    getDeptTreeselect() {
      deptTreeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys()
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    // 所有部门节点数据
    getDeptAllCheckedKeys() {
      // 目前被选中的部门节点
      let checkedKeys = this.$refs.dept.getCheckedKeys()
      // 半选中的部门节点
      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      return roleMenuTreeselect(roleId).then(response => {
        this.menuOptions = response.menus
        return response
      })
    },
    /**导出**/
    downloadExcelDC() {
      let a = document.createElement("a");
      a.href = "/static/export.xlsx";
      a.download = "导出数据.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    /**下载模板**/
    downloadExcel() {
      let a = document.createElement("a");
      a.href = "/static/input.xlsx";
      a.download = "导入模板.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    /** 根据角色ID查询部门树结构 */
    getRoleDeptTreeselect(roleId) {
      return roleDeptTreeselect(roleId).then(response => {
        this.deptOptions = response.depts
        return response
      })
    },
    // 角色状态修改
    handleStatusChange(row) {
      let text = row.status === '0' ? '启用' : '停用'
      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
        return changeRoleStatus(row.roleId, row.status)
      }).then(() => {
        this.$modal.msgSuccess(text + '成功')
      }).catch(function() {
        row.status = row.status === '0' ? '1' : '0'
      })
    },

    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([])
      }
      this.menuExpand = false,
        this.menuNodeAll = false,
        this.deptExpand = true,
        this.deptNodeAll = false,
        this.form = {
          roleId: undefined,
          roleName: undefined,
          roleKey: undefined,
          roleSort: 0,
          status: '0',
          menuIds: [],
          deptIds: [],
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          remark: undefined
        }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.loading = true
      let _self = this
      setTimeout(function() {
        _self.getList()
      }, 1000)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == 'menu') {
        let treeList = this.menuOptions
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
        }
      } else if (type == 'dept') {
        let treeList = this.deptOptions
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
        }
      }
    },
    /** 新增按钮操作*/
    handleAdd() {
      this.reset()
      this.openAdd= true
      this.title = '添加'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      /* this.$refs.editRef.isOpen = true
      this.formData = row
      this.reset()
      this.title = '编辑' */
      this.reset()
      this.open= true
      this.title = '编辑'
    },
    /** 选择角色权限范围触发 */
    dataScopeSelectChange(value) {
      if (value !== '2') {
        this.$refs.dept.setCheckedKeys([])
      }
    },
    /** 分配用户操作 */
    handleAuthUser: function(row) {
      const roleId = row.roleId
      this.$router.push('/system/role-auth/user/' + roleId)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const name = row.name
      this.$modal.confirm('是否确认删除选中的数据项？').then(function() {
        return true
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
     /** 删除按钮操作 */
        handleDeleteAll(row) {
          const name = row.name
          if (!name === undefined) {
            this.$modal.confirm('是否确认删除设备名称为"' + name + '"的数据项？').then(function () {
              return true
            }).then(() => {
              this.getList()
              this.$modal.msgSuccess('删除成功')
            }).catch(() => {
            })
          }else {
            const ids = this.ids
            if (ids !=null && ids.length > 0){
              this.$modal.confirm('是否确认批量删除数据项？').then(function () {

                return true
              }).then(() => {
                this.getList()
                this.$modal.msgSuccess('删除成功')
                this.$refs.multipleTable.clearSelection();
              }).catch(() => {
              })
            }else {
              this.$modal.msgError('请先选择数据')
            }

          }


        },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
